<template>
	<view class="login">
		<view class="topText">
			<text class="leftText">X.</text>
			<view class="rightSelect"><uni-icons type="bars" size="45"></uni-icons></view>
		</view>
		<view class="bannerText"><text class="sign">Sign Up.</text></view>
		<view class="loginUser">
			<form @submit="formSubmit">
				<uni-icons class="loginUserIconEmail loginUserIcon" type="email-filled"></uni-icons>
				<input
					type="text"
					placeholder="123445@email.com"
					name="userName"
					style="height: 80rpx;width: 550rpx; border-radius: 70rpx;box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(214, 214, 214, 0.8);"
					placeholder-class="placeholder"
				/>
				<uni-icons class="loginUserIconLock loginUserIcon" type="locked-filled"></uni-icons>
				<input
					password="true"
					placeholder="···············"
					name="password"
					style="height: 80rpx;border-radius: 70rpx;box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(214, 214, 214, 0.8);"
					placeholder-class="placeholder"
				/>
				<button class="loginUserButton" form-type="submit">SIGN&nbsp;UP</button>
			</form>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { getUserData } from '@/api/login.js';
export default {
	name: 'login',
	data() {
		return {
			username: '',
			password: ''
		};
	},
	methods: {
		...mapMutations(['login']),
		async formSubmit(e) {
			// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
			let useracc = e.detail.value;
			this.username = useracc.userName;
			this.password = useracc.password;
			await getUserData(this.username, this.password).then(res => {
				//post请求
				let data = res.data;
				if (data.code === 0) {
					this.login(data.use); //调用vuex方法改变登录状态
					uni.showToast({
						title: data.use.msg,
						duration: 1000
					});
					setTimeout(() => {
						uni.switchTab({
							url: '../index/index'
						});
					}, 1000);
				} else if (data.code === 1) {
					uni.showModal({
						title: data.use.isO,
						content: data.use.msg,
						confirmText: '重新登录',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>

<style scoped>
.login {
	padding: 35rpx;
	background-color: #f3f7f8;
	height: 100vh;
	position: relative;
}
.leftText {
	font-size: 70rpx;
	font-weight: bold;
}
.topText {
	display: flex;
	justify-content: space-between;
}
.bannerText {
	text-align: center;
	margin-top: 150rpx;
	font-size: 45rpx;
	font-weight: bold;
}
.loginUser {
	position: absolute;
	bottom: 250rpx;
	left: 110rpx;
}
.loginUser input {
	margin-bottom: 40rpx;
}
.loginUserIcon {
	position: absolute;
	z-index: 9;
}
.loginUserIconEmail {
	left: 30rpx;
	top: 25rpx;
}
.loginUserIconLock {
	left: 25rpx;
	top: 143rpx;
}
.loginUserButton {
	height: 80rpx;
	line-height: 80rpx;
	background-color: #09242f;
	color: #ffffff;
	font-size: 20rpx;
	border-radius: 70rpx;
	box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(131, 131, 131, 0.8);
}
/deep/ .uni-input-wrapper {
	background-color: #ffffff;
	padding-left: 90rpx;
}
/deep/.placeholder {
	margin-left: 90rpx;
}
</style>
